<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .head-nav{
            width: 100%;
        }
        .nav-item{
            float: left;
            width: 50%;
            height: 60px;
            text-align: center;
            line-height: 60px;
            font-size: 30px;
            border-bottom: 5px solid white;
        }
        .nav-item:active{
            border-bottom: 5px solid deepskyblue;
            color: deepskyblue;
        }
        a{
            color: #337AB7;
            text-decoration: none;
        }
        a:active{
            color: deepskyblue;
            text-decoration: none;
        }
        .items{
            padding: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 15px;
        }
        .item_bg{
            background:#F3F3F3;
        }
        .item_right .money{
            font-size: 23px;
            color: #4B90DE;
        }
        .item_left{}
        .item_left .item_detail{
            display: flex;
            flex-direction: row;
            align-items: center;
            text-align: center;
            padding: 5px;
        }
        .thumb{
            width: 30px;
            height: 30px;
            margin-right: 10px;
        }
        .value{
            color:#D7B87D;
        }
        .nodata{
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
        }
        .clear{
            width: 70vw;
            background:  #4B90DE;
            color: white;
            text-align: center;
            margin: 20px auto;
            padding: 20px 0 ;
            border-radius: 10px;
        }
    </style>
</head>
<body>
<div class="head-nav">
    <div class="nav-item">
        <a th:href="@{/}">首页</a>
    </div>
    <div class="nav-item">
        <a th:href="@{/history}">历史</a>
    </div>
</div>
<!--<div class="nodata">-->
<!--    暂无历史数据-->
<!--</div>-->
<div class="items item_bg">
    <div class="item_left">
        <div class="item_detail">
            <img src="/img/4.png" class="thumb"></img>
            <div>培训</div>
        </div>
        <div class="item_detail">
            <div>2020-7-3</div>
            <div>至</div>
            <div>2020-7-3</div>
        </div>
        <div class="item_detail">
            <div>出差到</div>
            <!-- <div class="value">{{foo.bar(item)}}</div> -->
            <div class="value">陕西省</div>
            <div>，共</div>
            <div class="value">1</div>
            <div>天</div>
        </div>
    </div>
    <div class="item_right">
        <div class="money">130元</div>
    </div>
</div>
<div class="items">
    <div class="item_left">
        <div class="item_detail">
            <img src="/img/4.png" class="thumb"></img>
            <div>培训</div>
        </div>
        <div class="item_detail">
            <div>2020-7-3</div>
            <div>至</div>
            <div>2020-7-3</div>
        </div>
        <div class="item_detail">
            <div>出差到</div>
            <!-- <div class="value">{{foo.bar(item)}}</div> -->
            <div class="value">陕西省</div>
            <div>，共</div>
            <div class="value">1</div>
            <div>天</div>
        </div>
    </div>
    <div class="item_right">
        <div class="money">130元</div>
    </div>
</div>
<div class="items item_bg">
    <div class="item_left">
        <div class="item_detail">
            <img src="/img/4.png" class="thumb"></img>
            <div>培训</div>
        </div>
        <div class="item_detail">
            <div>2020-7-3</div>
            <div>至</div>
            <div>2020-7-3</div>
        </div>
        <div class="item_detail">
            <div>出差到</div>
            <!-- <div class="value">{{foo.bar(item)}}</div> -->
            <div class="value">陕西省</div>
            <div>，共</div>
            <div class="value">1</div>
            <div>天</div>
        </div>
    </div>
    <div class="item_right">
        <div class="money">130元</div>
    </div>
</div>
<div class="clear" bindtap="clearData" bindtouchstart='aaa'>清除数据</div>
</body>
</html>